<template>
<div>
  <el-form>
  	<el-form-item>
  		<el-button
  		:disabled="clickDisabled"
        @click="importPoiData"
  		>导入MAPPOI(清空数据库MAPPOI表再导入)</el-button>
  	</el-form-item>
  </el-form>
</div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue';
import jnMapPoiJson from '/@/mock/jnpoi.json';
import {  
  createArticle,
  ArticleType,
  getArticles
} from '/@/request/articles'

export default {
  name: 'mappoi',
  components: {},
  setup() {
  	const state = reactive({
  		clickDisabled:true,
  		pagedata:{
  			currentPage: 1,
        	pageCount: 10,
  		},
  	});
	
  	const importPoiData = async()=>{
  		const poi=jnMapPoiJson;
  		if (poi.length>0)
  		{  			
  			for (let i=0;i<poi.length;i++)
  			{  				
  				await createArticle(poi[i],ArticleType.MAPPOI).then(() => {
  				  state.clickDisabled=true;
			      }).catch(err => {			      
			     });
  			}
  		}
  	};  	

  	const getPoiData = async()=>{  		
		await getArticles(state.pagedata,ArticleType.MAPPOI).then(res => {				
			state.clickDisabled=res.total?true:false;				             
         });
  	};

  	onMounted(()=>{
  		getPoiData();
  	});

  	return{
  		...toRefs(state),
  		importPoiData,
  	};
  },
}
</script>
